<template>
  <a-drawer
    v-model:visible="visible"
    :title="modalTitle"
    :closable="false"
    width="75%"
    :footer-style="{ textAlign: 'right' }"
    @close="handleCancel"
  >
    <a-form ref="formRef" :model="formState" :label-col="{ span: 3 }">
      <a-form-item
        label="申购名称"
        name="title"
        :rules="[{ required: true, message: '请输入申购名称' }]"
        :wrapper-col="{ span: 12 }"
      >
        <a-input v-model:value="formState.title" placeholder="请输入申购名称" />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number
          v-model:value="formState.sort"
          placeholder="请输入排序"
          style="width: 250px"
        />
      </a-form-item>
      <a-form-item
        label="申购商品"
        :rules="[{ required: true, message: '请选择申购商品' }]"
        name="goods_id"
      >
        <a-button type="primary" @click="handleAddSubscribe">
          <PlusOutlined />
          添加申购商品
        </a-button>
        <a-table
          :columns="columns"
          :data-source="state.goods"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'goods_img'">
              <a-image
                :src="record.goods_img"
                :height="50"
                :width="50"
              ></a-image>
            </template>
          </template>
        </a-table>
      </a-form-item>
      <a-form-item
        label="截止时间"
        name="sign_time"
        :rules="[{ required: true, message: '请输入截止时间' }]"
      >
        <a-date-picker
          show-time
          placeholder="请输入截止时间"
          v-model:value="formState.sign_time"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>
      <a-form-item
        label="公布时间"
        name="publish_time"
        :rules="[{ required: true, message: '请输入公布时间' }]"
      >
        <a-date-picker
          show-time
          placeholder="请选择公布时间"
          v-model:value="formState.publish_time"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>
      <a-form-item
        label="放出件数"
        name="number"
        :rules="[{ required: true, message: '请输入放出件数' }]"
      >
        <a-input-number
          v-model:value="formState.number"
          placeholder="请输入放出件数"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item
        label="虚拟放出件数"
        name="virtually_number"
        :rules="[{ required: true, message: '请输入虚拟放出件数' }]"
      >
        <a-input-number
          v-model:value="formState.virtually_number"
          placeholder="请输入虚拟放出件数"
          style="width: 300px"
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk">确定</a-button>
    </template>
  </a-drawer>
  <!-- 申购商品 -->
  <Goods ref="goodsRef" @select-goods="handleGood" />
</template>
<script setup>
import dayjs from "dayjs";
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { add, edit, info } from "@/api/subscribe";
import Goods from "./Goods.vue";

const { visible, modalTitle } = useModal();

const emits = defineEmits(["model-success"]);
const formRef = ref();
const goodsRef = ref();

const columns = [
  {
    title: "id",
    dataIndex: "goods_id",
  },
  {
    title: "商品名称",
    dataIndex: "goods_name",
  },
  {
    title: "商品图片",
    dataIndex: "goods_img",
  },
  {
    title: "货号",
    dataIndex: "goods_no",
  },
  {
    title: "库存",
    dataIndex: "stock_num",
  },
];
const formState = reactive({
  title: "",
  goods_id: null,
  sign_time: null,
  publish_time: null,
  number: "",
  virtually_number: "",
  sort: 0,
});

const state = reactive({
  goods: [],
});
const show = (model) => {
  visible.value = true;
  modalTitle.value = model ? "编辑申购" : "新增申购";
  if (model && model.subscribe_id) {
    getDetails(model.subscribe_id);
  } else {
    resetForm({
      subscribe_id: null,
    });
    state.goods = [];
  }
};
const getDetails = (id) => {
  info({
    id: id,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data;
      resetForm(data);
      state.goods.push(data.goods);
      // 截止时间
      formState.sign_time =
        formState.sign_time && formState.sign_time !== "-"
          ? dayjs(formState.sign_time, "YYYY-MM-DD HH:mm:ss")
          : "";
      // 公布时间
      formState.publish_time =
        formState.publish_time && formState.publish_time !== "-"
          ? dayjs(formState.publish_time, "YYYY-MM-DD HH:mm:ss")
          : "";
    }
  });
};
//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    let params = {
      ...formState,
    };
    if (formState.subscribe_id) {
      edit({
        id: formState.subscribe_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    } else {
      //添加
      add({ ...params }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
// 关闭
const handleCancel = () => {
  formRef.value.resetFields();
  state.goods = [];
  visible.value = false;
};
// 添加申购商品
const handleAddSubscribe = () => {
  goodsRef.value.show();
};
const handleGood = (data) => {
  state.goods = data;
  formState.goods_id = data[0].goods_id;
};
defineExpose({
  show,
});
</script>